<template>
	<view class="content">
		<uni-nav-bar :fixed='fixed' >
		    <view class="header_middle">居家艺术</view>
		    <view slot="left" class="header_left" @tap='back'>
				<image src="/static/svg/return.svg"  class="header_back"></image>
			</view>
		    <view slot="right" class="header_right">
				<image src="/static/svg/search.svg" @tap="toSearch"></image>
				<view class="header_voice" @tap='toMessageBox'>
					<view></view>
					<image src="/static/svg/voice.svg" ></image>
				</view>
			</view>
		</uni-nav-bar>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" indicator-color='#FFFFFF' indicator-active-color='#C84739' circular>
			<swiper-item v-for="(item,index) in swiperList" :key='index'>
				<image :src="item.rotationPhoto" mode="aspectFill" class="banner_img"></image>
			</swiper-item>
		</swiper>
		<view style="height: 90rpx;" v-if="isNeedFixed"></view>
		<view class="title"  :style="{position:isNeedFixed?'fixed':'relative',top:isNeedFixed?'88rpx':'0'}" style="border-bottom: 1rpx solid #EEEEEE;">
			<view class="title_bar" @touchstart='titleTouchstart'  @touchend='titleTouchend'>
				<view v-for="(item,index) in titleList" :key='index' :class="{title_active:title_active==item.type}"
				@tap="chooseTitle" :data-type='item.type'>{{item.value}}
					<view v-if="title_active==item.type"></view>
				</view>
			</view>
			<view class="title_term" v-if="(title_active==designType||title_active==softType)&&designType!=1&&softType!=1" >
				<view class="title_term_one" @tap="toChooseBig" data-isChoosed='theCity' :data-state="4">
					<text :style="{color:(chooseCity||isChoosed=='theCity')?'#C84739':''}">{{chooseCity?chooseCity.substring(0,5):'城市'}}</text>
					<image src="/static/svg/xl.svg" mode="" v-if="isChoosed!='theCity'"></image>
					<image src="/static/svg/sl.svg" mode="" v-if="isChoosed=='theCity'"></image>
				</view>
				<view class="title_term_one" @tap="toChooseBig" data-isChoosed='theSort' :data-state="3">
					<text :style="{color:(sortChoosed||isChoosed=='theSort')?'#C84739':''}">{{sortChoosed?sortChoosed.substring(0,5):'排序'}}</text>
					<image src="/static/svg/xl.svg" mode="" v-if="isChoosed!='theSort'"></image>
					<image src="/static/svg/sl.svg" mode="" v-if="isChoosed=='theSort'"></image>
				</view>
				<view class="title_term_one" @tap="toChooseBig" data-isChoosed='thePlace' :data-state="2">
					<text :style="{color:(placeChoosed||isChoosed=='thePlace')?'#C84739':''}">{{placeChoosed?placeChoosed.substring(0,5):'场所'}}</text>
					<image src="/static/svg/xl.svg" mode="" v-if="isChoosed!='thePlace'"></image>
					<image src="/static/svg/sl.svg" mode="" v-if="isChoosed=='thePlace'"></image>
				</view>
				<view class="title_term_one" @tap="toChooseBig" data-isChoosed='theStyle' :data-state="0">
					<text :style="{color:(styleChoosed||isChoosed=='theStyle')?'#C84739':''}">{{styleChoosed?styleChoosed.substring(0,5):'风格'}}</text>
					<image src="/static/svg/xl.svg" mode="" v-if="isChoosed!='theStyle'"></image>
					<image src="/static/svg/sl.svg" mode="" v-if="isChoosed=='theStyle'"></image>
				</view>
			</view>
			<view class="title_choose_body" @tap.self="isChoosed=''"  v-if="((title_active==designType||title_active==softType)&&designType!=1&&softType!=1)&&isChoosed" >
				<image src="/static/svg/delta.svg" class="delta" :style="{left:isChoosed=='theCity'?'66rpx':isChoosed=='theSort'?'253.5rpx':isChoosed=='thePlace'?'441rpx':isChoosed=='theStyle'?'628.5rpx':'66rpx'}"></image>
				<view class="title_choose_body_body" v-if="isChoosed=='theCity'">
					<view class="province">
						<view class="province_one" @tap="toChooseProvince" :data-index='-1'>
							<view class="province_choose" v-if="-1==provinceChooseIndex"></view>
							<text :style="{color:-1==provinceChooseIndex?'#C84739':''}">全国</text>
						</view>
						<view class="province_one" v-for="(item,index) in addressList" :key='index' @tap="toChooseProvince" :data-index='index'>
							<view class="province_choose" v-if="index==provinceChooseIndex"></view>
							<text :style="{color:index==provinceChooseIndex?'#C84739':''}">{{item.name}}</text>
						</view>
					</view>
					<view class="province city">
						<view class="province_one city_one" @tap="toChooseCity" :data-index='-1' v-if="provinceChooseIndex&&provinceChooseIndex>=0">
							<text :style="{color:-1==cityChooseIndex?'#C84739':''}" >全省</text>
						</view>
						<view class="province_one" v-for="(item,index) in cityList" :key='index' @tap="toChooseCity" :data-index='index'>
							<text :style="{color:index==cityChooseIndex?'#C84739':''}">{{item.name}}</text>
						</view>
					</view>
					<view class="province area">
						<view class="province_one area_one" @tap="toChooseArea" :data-index='-1' v-if="provinceChooseIndex&&provinceChooseIndex>=0&&cityChooseIndex&&cityChooseIndex>=0">
							<text :style="{color:-1==areaChooseIndex?'#C84739':''}">全市</text>
						</view>
						<view class="province_one" v-for="(item,index) in areaList" :key='index' @tap="toChooseArea" :data-index='index'>
							<text :style="{color:index==areaChooseIndex?'#C84739':''}">{{item.name}}</text>
						</view>
					</view>
				</view> 
				<view class="title_choose_body_body" style="padding:40rpx 0 40rpx 30rpx;display: flex;flex-flow: column;" v-if="isChoosed=='theSort'">
					<view class="sort "  v-for="(item,index) in sortList" @tap="toChooseSort" :data-value='item.content' :key='index' :class="{sort_first:index==0}" :data-id='item.id' :style="{color:sortChoosed==item.content?'#C84739':''}">
						{{item.content}}
					</view>
				</view>	
				<view class="title_choose_body_body" style="padding:40rpx 0 40rpx 30rpx;display: flex;flex-flow: column;" v-if="isChoosed=='thePlace'">
					<view class="sort" v-for="(item,index) in placeList" @tap="toChoosePlace" :key='index' :class="{sort_first:index==0}" :data-value='item.content' :data-id='item.id' :style="{color:placeChoosed==item.content?'#C84739':''}">
						{{item.content}}
					</view>
				</view>	
				<view class="title_choose_body_body" style="padding:40rpx 0 40rpx 30rpx;display: flex;flex-flow: column;" v-if="isChoosed=='theStyle'">
					<view class="sort" v-for="(item,index) in styleList" :key='index' @tap="toChooseStyle" :class="{sort_first:index==0}" :data-value='item.content' :data-id='item.id' :style="{color:styleChoosed==item.content?'#C84739':''}">
						{{item.content}}
					</view>
				</view>	
			</view>
		</view>
		<view style="height: 60rpx;" v-if="(title_active==designType||title_active==softType)&&designType!=1&&softType!=1"></view>
		<view class="homeDesign_title" v-if="title_active==1&&!showLoading&&designList.length>0" style="margin-top: 30rpx;">
			<text>家装设计</text>
			<view @tap="chooseTitle" :data-type='designType'>
				<text>更多</text>
				<image src="/static/svg/More.svg" ></image>
			</view>
		</view>
		<view v-if="title_active==1||title_active==designType" :style="{minHeight:(isChoosed&&designList.length>0)?'1336rpx':''}">
			<homeDesign v-for='(item,index) in designList' :key='index' :message='item' :index='index' :isIndex='true' @collect='homeDesignCollect' @praise='homeDesignPraise'/>
		</view>
		<view class="homeDesign_title" v-if="title_active==1&&!showLoading&&softList.length>0">
			<text>软装产品</text>
			<view @tap="chooseTitle" :data-type='softType'>
				<text>更多</text>
				<image src="/static/svg/More.svg" ></image>
			</view>
		</view>
		<view  :style="{minHeight:(isChoosed&&softList.length>0)?'1336rpx':''}" v-if="(title_active==1||title_active==softType)&&softList.length>0">
			<softProducts v-for='(item,index) in softList' :key='index' :message='item' :index='index' :isIndex='true' @collect='softProductCollect' @praise='softProductPraise'/>
		</view>
		<view class="homeDesign_title" v-if="title_active==1&&!showLoading&&fineArtList.length>0">
			<text>艺术精品</text>
			<view @tap="chooseTitle" :data-type='fineArtType'>
				<text>更多</text>
				<image src="/static/svg/More.svg" ></image>
			</view>
		</view>
		<view style="width: 750rpx;" v-if="title_active==1&&fineArtList.length>0" :style="{height:height}">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='fineArtList'>
				<xgWaterfallItem  v-for='(item,index) in fineArtList' :key='index' >
					<fineArt :message='item' @praise='fineArtPraise' :index='index'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<view style="width: 750rpx;" v-if="title_active==fineArtType&&fineArtType!=1&&fineArtList.length>0" :style="{height:height}">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='fineArtList'>
				<xgWaterfallItem  v-for='(item,index) in fineArtList' :key='index' >
					<fineArt :message='item' @praise='fineArtPraise' :index='index'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<uni-load-more :status="status"  v-if="showLoading" style="margin-top: 30rpx;"/>
		<uni-load-more status="noMore"  v-if="!hasMore&&!isChoosed&&(softList.length>0||designList.length>0||fineArtList.length>0)&&title_active!=1" style="margin-top: 30rpx;"/>
		<template v-if="((title_active==designType&&designType!=1&&designList.length==0)||(title_active==softType&&softType!=1&&softList.length==0)||(title_active==fineArtType&&fineArtType!=1&&fineArtList.length==0))&&!showLoading">
			<view class="noResult" :style="{minHeight:isChoosed?'1336rpx':''}">
				<image src="/static/img/noResult.png" mode=""></image>
				<text>暂无相关内容</text>
			</view>
		</template>	
		<indexFooter/>
		<editor  :read-only='true' class="ql-container designExample"   style="opacity: 0;position: fixed;top: -10000000px;" ></editor>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import addressList from "@/static/js/address.js"
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import homeDesign from "@/components/index/homeDesign.vue"
	import softProducts from "@/components/index/softProducts.vue"
	import fineArt from "@/components/index/fineArt.vue"
	import indexFooter from "@/components/footer/footer.vue"
	import urls from "@/common/util/homeArtIndex.js"
	import xgWaterfall from "@/components/xg-waterfall/xg-waterfall.vue"
	import xgWaterfallItem from "@/components/xg-waterfall-item/xg-waterfall-item.vue"
	export default {
		components: {uniNavBar,homeDesign,softProducts,fineArt,indexFooter,xgWaterfall,xgWaterfallItem,uniLoadMore},
		data() {
			return {
				fixed:true,
				titleList: [],
				swiperList:[],
				title_active:1,
				startX:null,
				startY:null,
				isNeedFixed:false,
				addressList:addressList,
				provinceChooseIndex:-2,
				cityList:[],
				cityChooseIndex:-2,
				areaList:[],
				areaChooseIndex:-2,
				isChoosed:"",
				sortList:[],
				sortChoosed:"",
				sortChoosedId:"",
				placeList:[],
				placeChoosed:"",
				placeChoosedId:"",
				styleList:[],
				styleChoosed:"",
				styleChoosedId:"",
				twoChooseJson:{},
				threeChooseJson:{},
				chooseCity:"",
				height:0,
				softList:[],
				designList:[],
				fineArtList:[],
				status:'loading',
				hasMore:true,
				pageNumber:1,
				showLoading:false,
				designType:1,
				softType:1,
				fineArtType:1,
				
			}
		},
		onLoad() {
			this.getSwiperItem()
			this.getMenu()
			this.getStyleList()
			this.getSortList()
			this.getPlaceList()
		},
		onShow() {
			this.isNeedFixed=false
			this.softList=[]
			this.designList=[]
			this.fineArtList=[]
			this.pageNumber=1
			this.getList()
		},
		onReachBottom(){
			if(this.hasMore){
				this.pageNumber+=1
				this.getList()
			}
		},	
		onPageScroll(e){
			let windowWidth=uni.getSystemInfoSync().windowWidth
			if(e.scrollTop*750/windowWidth>=400){
				this.isNeedFixed=true
			}else{
				this.isNeedFixed=false
			}
		},
		onPullDownRefresh(){
			this.isChoosed=""
			this.softList=[]
			this.designList=[]
			this.fineArtList=[]
			this.pageNumber=1
			this.fixed=false
			this.hasMore=true
			let data=this.getFullPlace()
			this.height=0
			this.getList(data)
		},
		watch: {
			title_active(newValue, oldValue) {
				this.softList=[]
				this.designList=[]
				this.fineArtList=[]
				this.pageNumber=1
				if(oldValue==this.designType&&this.designType!=1){
					this.twoChooseJson.sortChoosed=this.sortChoosed
					this.twoChooseJson.styleChoosed=this.styleChoosed
					this.twoChooseJson.placeChoosed=this.placeChoosed
					this.twoChooseJson.sortChoosedId=this.sortChoosedId
					this.twoChooseJson.styleChoosedId=this.styleChoosedId
					this.twoChooseJson.placeChoosedId=this.placeChoosedId
					this.twoChooseJson.provinceChooseIndex=this.provinceChooseIndex
					this.twoChooseJson.cityList=this.cityList
					this.twoChooseJson.cityChooseIndex=this.cityChooseIndex
					this.twoChooseJson.areaList=this.areaList
					this.twoChooseJson.areaChooseIndex=this.areaChooseIndex
				}
				if(oldValue==this.softType&&this.softType!=1){
					this.threeChooseJson.sortChoosed=this.sortChoosed
					this.threeChooseJson.styleChoosed=this.styleChoosed
					this.threeChooseJson.placeChoosed=this.placeChoosed
					this.threeChooseJson.sortChoosedId=this.sortChoosedId
					this.threeChooseJson.styleChoosedId=this.styleChoosedId
					this.threeChooseJson.placeChoosedId=this.placeChoosedId
					this.threeChooseJson.provinceChooseIndex=this.provinceChooseIndex
					this.threeChooseJson.cityList=this.cityList
					this.threeChooseJson.cityChooseIndex=this.cityChooseIndex
					this.threeChooseJson.areaList=this.areaList
					this.threeChooseJson.areaChooseIndex=this.areaChooseIndex
				}
				if(newValue==this.designType&&this.designType!=1){
					this.sortChoosedId=this.twoChooseJson.sortChoosedId
					this.styleChoosedId=this.twoChooseJson.styleChoosedId
					this.placeChoosedId=this.twoChooseJson.placeChoosedId
					this.sortChoosed=this.twoChooseJson.sortChoosed
					this.styleChoosed=this.twoChooseJson.styleChoosed
					this.placeChoosed=this.twoChooseJson.placeChoosed
					this.provinceChooseIndex=this.twoChooseJson.provinceChooseIndex
					this.cityList=this.twoChooseJson.cityList
					this.cityChooseIndex=this.twoChooseJson.cityChooseIndex	
					this.areaList=this.twoChooseJson.areaList	
					this.areaChooseIndex=this.twoChooseJson.areaChooseIndex	
					this.chooseCity=this.nowChooseCity()
					let data=this.getFullPlace()
					this.getList(data)
				}
				if(newValue==this.softType&&this.softType!=1){
					this.sortChoosed=this.threeChooseJson.sortChoosed
					this.styleChoosed=this.threeChooseJson.styleChoosed
					this.placeChoosed=this.threeChooseJson.placeChoosed
					this.sortChoosedId=this.threeChooseJson.sortChoosedIdId
					this.styleChoosedId=this.threeChooseJson.styleChoosedId
					this.placeChoosedId=this.threeChooseJson.placeChoosedId
					this.provinceChooseIndex=this.threeChooseJson.provinceChooseIndex
					this.cityList=this.threeChooseJson.cityList
					this.cityChooseIndex=this.threeChooseJson.cityChooseIndex	
					this.areaList=this.threeChooseJson.areaList	
					this.areaChooseIndex=this.threeChooseJson.areaChooseIndex
					this.chooseCity=this.nowChooseCity()
					let data=this.getFullPlace()
					this.getList(data)
				}
				if(newValue==1){
					this.height=0
					this.getList()
				}
				if(newValue==this.fineArtType&&this.fineArtType!=1){
					this.height=0
					this.getList()
				}
			}
		},
		methods: {
			back(){
				window.location.href = 'http://classic.wljiam.com/personal'
				return
				uni.reLaunch({
					url: '/pages/login/login?index=true'
				})
			},
			toMessageBox(){
				// uni.navigateTo({
				// 	url: '/pages/messageBox/index'
				// })
			},
			async getStyleList(){
				let res=await urls.getKind({state:0})
				this.styleList=res.data
			},	
			async getSortList(){
				let res=await urls.getKind({state:3})
				this.sortList=res.data
			},	
			async getPlaceList(){
				let res=await urls.getKind({state:2})
				this.placeList=res.data
			},
			async getSwiperItem(){
				let res=await urls.swiperItem()
				this.swiperList=res.data
			},
			async getMenu(){
				let res=await urls.getMenu({type:0})
				for(let a=0;a<res.data.length;a++){
					res.data[a].type=a+1
					res.data[a].value=res.data[a].content
					if(res.data[a].state==1){
						this.designType=a+1	
					}else if(res.data[a].state==2){
						this.softType=a+1
					}else if(res.data[a].state==3){
						this.fineArtType=a+1
					}
				}
				this.titleList=res.data
			},
			getList(d){
				let index
				try{
					index=(this.titleList[Number(this.title_active)-1].state+1)?(this.titleList[Number(this.title_active)-1].state+1):1
				}catch(e){
					index=1
					//TODO handle the exception
				}
				switch (index){
					case 2:
						if(d){
							this.getSoft(2,d)
						}else{
							this.getSoft(2)
						}
						break;
					case 3:
						if(d){
							this.getSoft(3,d)
						}else{
							this.getSoft(3)
						}
						break;	
					case 4:
						this.getFineArt()
						break;	
					case 1:
						this.getIndex()
						break;	
					default:
						break;
				}
			},
			//获取推荐
			async  getIndex(){
				this.showLoading=true
				this.status='loading'
				let data={}
				data.userId=localStorage.getItem('userId')
				let res=await urls.rotationChartindex(data)
				this.softList=res.data.softProduct
				this.designList=res.data.design
				this.fineArtList=res.data.FineArt
				this.hasMore=false
				this.showLoading=false
				setTimeout(()=>{
					this.fixed=true
					uni.stopPullDownRefresh();
				},800)
			},
			//获取艺术精品
			async  getFineArt(){
				this.showLoading=true
				this.status='loading'
				let data={}
				data.page=this.pageNumber
				data.count=8
				data.userId=localStorage.getItem('userId')
				let res=await urls.fineArtAll(data)
				if(res.data.hasMore==0){
					this.hasMore=false
				}else{
					this.hasMore=true
				}
				if(res.data.list){
					this.fineArtList.push.apply(this.fineArtList,res.data.list)
				}
				this.showLoading=false
				setTimeout(()=>{
					this.fixed=true
					uni.stopPullDownRefresh();
				},800)
			},
			//获取家装设计,软装产品
			async getSoft(n,d){
				this.showLoading=true
				this.status='loading'
				let data={}
				data.page=this.pageNumber
				data.count=5
				data.userId=localStorage.getItem('userId')
				let region,sort,style,province,city,area,place,res
				if(d){
					region=d.region
					province=d.province
					city=d.city
					area=d.area
				}else{
					if(n==2){
						res=await urls.getSoft(data)
						if(res.data.hasMore==0){
							this.hasMore=false
						}else{
							this.hasMore=true
						}
						this.designList.push.apply(this.designList,res.data.list)
					}else if(n==3){
						res=await urls.softAll(data)
						if(res.data.hasMore==0){
							this.hasMore=false
						}else{
							this.hasMore=true
						}
						this.softList.push.apply(this.softList,res.data.list)
					}
					this.showLoading=false
					return
				}
				if(this.sortChoosed){
					data.sort=this.sortChoosedId
				}
				if(this.styleChoosed){
					data.style=this.styleChoosedId
				}
				if(this.placeChoosed){
					data.place=this.placeChoosedId
				}
				
				if(region||region==0){
					data.region=region
				}
				if(sort||sort==0){
					data.sort=sort
				}
				if(province||province==0){
					data.province=province
				}
				if(city||city==0){
					data.city=city
				}
				if(area||area==0){
					data.area=area
				}
				if(place||place==0){
					data.place=place
				}
				if(n==2){
					res=await urls.getSort(data)
					if(res.data.hasMore==0){
						this.hasMore=false
					}else{
						this.hasMore=true
					}
					this.designList.push.apply(this.designList, res.data.list)
				}else if(n==3){
					res=await urls.sortAll(data)
					if(res.data.hasMore==0){
						this.hasMore=false
					}else{
						this.hasMore=true
					}
					this.softList.push.apply(this.softList, res.data.list)
				}
				this.showLoading=false
				setTimeout(()=>{
					this.fixed=true
					uni.stopPullDownRefresh();
				},800)
			},	
			toSearch(){
				let index
				try{
					index=(this.titleList[Number(this.title_active)-1].state+1)?(this.titleList[Number(this.title_active)-1].state+1):1
				}catch(e){
					index=1
					//TODO handle the exception
				}
				let  type
				switch (index){
					case 2:
					case 3:
					case 4:
						type=this.titleList[index-1].state
						break;	
					case 1:
						type=this.titleList[1].state
						break;	
					default:
						break;
				}
				uni.navigateTo({
					url: '/pages/search/searchIndex?type=artIndex&state='+type
				})
			},
			titleTouchstart(e){
				this.startX=e.changedTouches[0].clientX
				this.startY=e.changedTouches[0].clientY
			},
			titleTouchend(e){
				if(e.changedTouches[0].clientY-this.startY>45||this.startY-e.changedTouches[0].clientY>45){
					return
				}
				if(e.changedTouches[0].clientX-this.startX>50){
					if(this.title_active==4){
						this.title_active=1
						this.isChoosed=""
					}else{
						this.title_active+=1
						this.isChoosed=""
					}
				}else if(this.startX-e.changedTouches[0].clientX>50){
					if(this.title_active==1){
						this.title_active=4
						this.isChoosed=""
					}else{
						this.title_active-=1
						this.isChoosed=""
					}
				}
			},
			chooseTitle(e){
				if(this.title_active!=Number(e.currentTarget.dataset.type)){
					this.title_active=Number(e.currentTarget.dataset.type)
					this.isChoosed=""
				}
			},
			toChooseBig(e){
				if(this.isChoosed&&this.isChoosed==e.currentTarget.dataset.ischoosed){
					this.isChoosed=""
				}else{
					this.isChoosed=e.currentTarget.dataset.ischoosed
					this.$nextTick(()=>{
						uni.pageScrollTo({
						     scrollTop: uni.getSystemInfoSync().windowWidth*400/750,
						})
					})
				}
			},
			toChoosePlace(e){
				if(this.placeChoosed!=e.currentTarget.dataset.value){
					this.softList=[]
					this.designList=[]
					this.fineArtList=[]
					this.pageNumber=1
					this.placeChoosed=e.currentTarget.dataset.value
					this.placeChoosedId=e.currentTarget.dataset.id
					let data=this.getFullPlace()
					this.getList(data)
				}
				this.isChoosed=""
			},
			toChooseStyle(e){
				if(this.styleChoosed!=e.currentTarget.dataset.value){
					this.softList=[]
					this.designList=[]
					this.fineArtList=[]
					this.pageNumber=1
					this.styleChoosed=e.currentTarget.dataset.value
					this.styleChoosedId=e.currentTarget.dataset.id
					let data=this.getFullPlace()
					this.getList(data)
				}
				this.isChoosed=""
			},
			toChooseSort(e){
				if(this.sortChoosed!=e.currentTarget.dataset.value){
					this.softList=[]
					this.designList=[]
					this.fineArtList=[]
					this.pageNumber=1
					this.sortChoosed=e.currentTarget.dataset.value
					this.sortChoosedId=e.currentTarget.dataset.id
					let data=this.getFullPlace()
					this.getList(data)
				}
				this.isChoosed=""
			},
			toChooseProvince(e){
				let index=e.currentTarget.dataset.index
				if(index==-1){
					this.cityList=[]
					this.provinceChooseIndex=-1
					this.cityChooseIndex=-2
					this.areaChooseIndex=-2
					this.areaList=[]
					this.isChoosed=""
					this.chooseCity=this.nowChooseCity()
					let data=this.getFullPlace()
					this.softList=[]
					this.designList=[]
					this.fineArtList=[]
					this.pageNumber=1
					this.getList(data)
					return
				}
				this.cityList=this.addressList[index].list
				this.provinceChooseIndex=index
				this.cityChooseIndex=-1
				this.areaChooseIndex=-2
				this.areaList=[]
			},
			toChooseCity(e){
				let index=e.currentTarget.dataset.index
				if(index==-1){
					this.areaList=[]
					this.cityChooseIndex=-1
					this.areaChooseIndex=-2
					this.isChoosed=""
					this.chooseCity=this.nowChooseCity()
					let data=this.getFullPlace()
					this.softList=[]
					this.designList=[]
					this.fineArtList=[]
					this.pageNumber=1
					this.getList(data)
					return
				}
				this.areaList=this.addressList[this.provinceChooseIndex].list[index].list
				this.cityChooseIndex=index
				this.areaChooseIndex=-1
			},
			toChooseArea(e){
				let index=e.currentTarget.dataset.index
				this.areaChooseIndex=index
				this.isChoosed=""
				this.chooseCity=this.nowChooseCity()
				let data=this.getFullPlace()
				this.softList=[]
				this.designList=[]
				this.fineArtList=[]
				this.pageNumber=1
				this.getList(data)
			},
			getFullPlace(){
				let data={}
				if(!this.provinceChooseIndex||this.provinceChooseIndex==-2){
					data.region=3
					return data
				}
				if(this.provinceChooseIndex==-1){
					data.region=3
					return data
				}
				if(this.cityChooseIndex==-1){
					if(this.addressList[this.provinceChooseIndex].name.indexOf('市')!=-1){
						data.region=1
						data.province=0
						data.city =this.addressList[this.provinceChooseIndex].name
						return data
					}
					data.region=0
					data.province=this.addressList[this.provinceChooseIndex].name
					return data
				}
				if(this.areaChooseIndex==-1){
					let name=this.addressList[this.provinceChooseIndex].list[this.cityChooseIndex].name
					if(name=='市辖区'){
						data.region=1
						data.province=0
						data.city =this.addressList[this.provinceChooseIndex].name
						return data
					}	
					data.region=1
					data.province=this.addressList[this.provinceChooseIndex].name
					data.city =name
					return data
				}
				if(this.areaChooseIndex>=0){
					let name=this.addressList[this.provinceChooseIndex].list[this.cityChooseIndex].name
					if(name=='市辖区'){
						data.region=2
						data.province=0
						data.city =this.addressList[this.provinceChooseIndex].name
						data.area=this.addressList[this.provinceChooseIndex].list[this.cityChooseIndex].list[this.areaChooseIndex].name
					}else{
						data.region=2
						data.province=this.addressList[this.provinceChooseIndex].name
						data.city=name
						data.area=this.addressList[this.provinceChooseIndex].list[this.cityChooseIndex].list[this.areaChooseIndex].name
					}
					return data
				}
			},
			nowChooseCity() {
				if(!this.provinceChooseIndex||this.provinceChooseIndex==-2){ 
					return null
				}
				if(this.provinceChooseIndex==-1){
					return '全国'
				}
				if(this.cityChooseIndex==-1){
					return this.addressList[this.provinceChooseIndex].name
				}
				if(this.areaChooseIndex==-1){
					let name=this.addressList[this.provinceChooseIndex].list[this.cityChooseIndex].name
					if(name=='市辖区'){
						return this.addressList[this.provinceChooseIndex].name
					}
					return name
				}
				if(this.areaChooseIndex>=0){
					return this.addressList[this.provinceChooseIndex].list[this.cityChooseIndex].list[this.areaChooseIndex].name
				}
			},
			success(e){
				this.height=e+'px'
			},
			homeDesignCollect(index,isAlready){
				if(!isAlready){
					this.designList[index].collection="1"
					this.designList[index].collectionNumber-=1
				}else{
					this.designList[index].collection="0"
					this.designList[index].collectionNumber+=1
				}	
			},
			homeDesignPraise(index,isAlready){
				if(!isAlready){
					this.designList[index].zan="1"
					this.designList[index].zanNumber-=1
				}else{
					this.designList[index].zan="0"
					this.designList[index].zanNumber+=1
				}	
			},
			softProductCollect(index,isAlready){
				if(!isAlready){
					this.softList[index].collection="1"
					this.softList[index].collectionNumber-=1
				}else{
					this.softList[index].collection="0"
					this.softList[index].collectionNumber+=1
				}	
			},
			softProductPraise(index,isAlready){
				if(!isAlready){
					this.softList[index].zan="1"
					this.softList[index].zanNumber-=1
				}else{
					this.softList[index].zan="0"
					this.softList[index].zanNumber+=1
				}	
			},
			fineArtPraise(index,isAlready){
				if(!isAlready){
					this.fineArtList[index].zan="1"
					this.fineArtList[index].zanNumber-=1
				}else{
					this.fineArtList[index].zan="0"
					this.fineArtList[index].zanNumber+=1
				}	
			},
			
		}
	}
</script>

<style lang="scss" scoped>
page{
	background-color: #F7F7F7;
}
.content{
	padding-bottom: 128rpx;
}
.header_left{
	height: 88rpx;
	width: 187.5rpx;
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	.header_back{
		height: 44rpx;
		width: 44rpx;
	}
}
.header_middle{
	height: 88rpx;
	width: 375rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	letter-spacing: 1rpx;
	color: #333333;
}
.header_right{
	height: 88rpx;
	width: 187.5rpx;
	min-width:187.5rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	image{
		height: 44rpx;
		width: 44rpx;
		margin-right: 36rpx;
	}
	.header_voice{
		height: 44rpx;
		width: 44rpx;
		position: relative;
		margin-right: 40rpx;
		image{
			height: 44rpx;
			width: 44rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		view{
			height: 12rpx;
			width: 12rpx;
			background-color: #C84739;
			position: absolute;
			right: -2rpx;
			top: -2rpx;
			border-radius: 50%;
		}
	}
}
.swiper{
	width: 750rpx;
	height: 400rpx;
	.banner_img{
		width: 750rpx;
		height: 400rpx;
	}
}
.title{
	background-color: #FFFFFF;
	position: relative;
	z-index: 998;
	.title_bar{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		width: 750rpx;
		padding: 0 40rpx;
		z-index: inherit;
		view{
			line-height:90rpx ;
			font-size: 28rpx;
			letter-spacing: 1rpx;
			color: #AEA8A2;
		}
		.title_active{
			font-weight: bold;
			color: #333333;
			font-size: 34rpx;
			position: relative;
			z-index: inherit;
			view{
				height: 6rpx;
				width: 34rpx;
				border-radius: 4.5rpx;
				background-color: #333333;
				position: absolute;
				bottom:0 ;
				left: 0;
			}
		}
	}
	.title_term{
		position: absolute;
		z-index: inherit;
		top: 90rpx;
		left: 0;
		width: 750rpx;
		height: 91rpx;
		background-color: #F7F7F7;
		display: flex;
		align-items: center;
		.title_term_one{
			height: 100%;
			width: 25%;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666666;
			letter-spacing: 1rpx;
			image{
				height: 24rpx;
				width: 24rpx;
				margin-left: 2rpx;
			}
		}
	}
	.title_choose_body{
		height: 10000rpx;
		width: 750rpx;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		top: 180rpx;
		left: 0;
		z-index: inherit;
		.delta{
			height: 17rpx;
			width: 37rpx;
			position: absolute;
			z-index: inherit;
			top: -17rpx;
			left: 66rpx;
		}
		.title_choose_body_body{
			min-height: 270rpx;
			max-height:820rpx;
			width: 750rpx;
			background-color: #FFFFFF;
			box-shadow:0px -1rpx 0px 0px rgba(0,0,0,0.01),0px -1rpx 0px 0px rgba(0,0,0,0.04);
			display: flex;
			.province{
				min-height: 270rpx;
				max-height: 820rpx;
				overflow-y: auto;
				width: 250rpx;
				border-right: 1rpx solid #EAEAEA;
				.province_one{
					position: relative;
					margin-top: 30rpx;
					min-height: 50rpx;
					width: 250rpx;
					padding: 4rpx 30rpx;
					font-size: 30rpx;
					line-height: 36rpx;
					letter-spacing: 1rpx;
					color: #333333;
					.province_choose{
						height: 50rpx;
						width: 4rpx;
						background-color: #C84739;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			}
			.area{
				border: 0;
			}
			.sort{
				margin-top: 50rpx;
				font-size: 30rpx;
				color: #333333;
				letter-spacing: 1rpx;
				line-height: 30rpx;
			}
			.sort_first{
				margin: 0;
			}
		}
	}
}
.homeDesign_title{
	margin-top: 40rpx;
	padding: 0 30rpx;
	height: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text{
		font-size: 28rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}
	view{
		display: flex;
		align-items: center;
		text{
			font-size: 28rpx;
			line-height: 30rpx;
			letter-spacing: 1rpx;
			color: #666666;
			margin-right: 12rpx;
		}
		image{
			height: 19rpx;
			width: 11rpx;
		}
		
	}
}
.noResult{
	display: flex;
	flex-flow: column;
	align-items: center;
	padding-top: 143rpx;
	image{
		height: 289rpx;
		width: 374rpx;
		display: block;
	}
	text{
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 60rpx;
	}
}
</style>